<template>
  <div class="app-container">
    <div class="div-table">
      <div class="search-form" style="margin-bottom:15px;">
        <el-select
          v-model="searchForm.scriptId"
          size="small"
          clearable
          filterable
          placeholder="请选择脚本"
        >
          <el-option
            v-for="item in scriptList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" size="small" @click="() => fetchData()">查询</el-button>
      </div>
      <el-table
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        @sort-change="sortTable"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="脚本名称" prop="scriptName" sortable>
          <template slot-scope="scope">{{ scope.row.scriptName }}</template>
        </el-table-column>
        <el-table-column label="任务状态" prop="status" sortable>
          <template slot-scope="scope">{{ scope.row.status }}</template>
        </el-table-column>
        <el-table-column label="开始时间" prop="startTime" sortable>
          <template slot-scope="scope">{{ scope.row.startTime }}</template>
        </el-table-column>
        <el-table-column label="结束时间" prop="endTime" sortable>
          <template slot-scope="scope">{{ scope.row.endTime }}</template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="small" type="success" @click="() => jobDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <pagination :pagination="pagination" />
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index'
import { getList } from '@/api/systemapi/job'
import { getAll as getAllScript } from '@/api/systemapi/script'
import { pageParams } from '@/settings'

export default {
  components: {
    pagination: Pagination
  },
  data() {
    return {
      list: null,
      scriptList: null,
      listLoading: true,
      formLabelWidth: '100px',
      // 分页
      pagination: pageParams,
      searchForm: {
        sidx: 'startTime', // 排序字段
        sord: 'desc', // 排序方向
        scriptId: '',
        startTime: '',
        endTime: '',
        rows: '10',
        page: '1'
      }
    }
  },
  watch: {
    // 分页查询
    'pagination.currentPage': function() {
      this.searchForm.page = this.pagination.currentPage
      this.fetchData()
    },
    'pagination.pageSize': function() {
      this.searchForm.rows = this.pagination.pageSize
      this.searchForm.page = 1
      this.fetchData()
    },
    // 分页查询
    'hostPagination.currentPage': function() {
      this.searchForm.page = this.pagination.currentPage
      this.fetchHostData()
    },
    'hostPagination.pageSize': function() {
      this.searchForm.rows = this.pagination.pageSize
      this.searchForm.page = 1
      this.fetchHostData()
    }
  },
  // 页面初始化时执行
  created() {
    // 脚本列表
    this.fetchData()
    this.fetchScriptList()
  },
  methods: {
    // 重置搜索，刷新列表
    reset() {
      this.searchForm = {
        sidx: 'startTime', // 排序字段
        sord: 'desc', // 排序方向
        startTime: '',
        endTime: '',
        rows: '10',
        page: '1'
      }
      this.currentArea = null
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getList({ ...this.searchForm }).then(response => {
        this.list = response.data.rows
        this.pagination.total = response.data.records
        this.listLoading = false
      })
    },
    sortTable(column) {
      // 获取字段名称和排序类型
      var fieldName = column.prop
      var sortingType = column.order

      const sortTypeMap = {
        '': '',
        ascending: 'asc',
        descending: 'desc'
      }

      this.searchForm.sidx = fieldName
      this.searchForm.sord = sortTypeMap[sortingType]

      this.fetchData()
    },
    jobDetail(data) {
      this.$router.push('/system/job/detail?jobId=' + data.jobId)
    },
    fetchScriptList() {
      this.listLoading = true
      getAllScript({}).then(response => {
        this.scriptList = response.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  display: flex;
  width: 100%;
  .div-tree {
    width: 300px;
  }
  .div-table {
    flex: 1;
  }
}

</style>
